<template>
    <div class="pageView-container">
        <!--查询-->
        <div class="search-container">
            <div>
                <el-button type="success" size="small" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
            </div>

            <h-search-bar show-more @toggle="searchMore = $event" @search="getDataInfo">
                <el-form :model="queryParams" size="small" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名 ">
                                <el-input v-model="queryParams.name" clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="部门">
                                <el-select v-model="queryParams.departmentId" style="width: 220px" clearable
                                           placeholder="请选择部门">
                                    <el-option v-for="item in departmentList" :key="item.value" :label="item.label"
                                               :value="item.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-show="searchMore">
                        <el-col :span="12">
                            <el-form-item label="日期">
                                <el-date-picker v-model="dateRange" style="width: 220px" value-format="yyyy-MM-dd"
                                                type="daterange" size="small" range-separator="-"
                                                start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户名称">
                                <el-input v-model="queryParams.projectName" size="small" clearable
                                          style="width: 220px"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </h-search-bar>
        </div>

        <!--表单-->
        <!--1-->
        <h-table :list="list" :total="total" :columns="columns" :options="options" :operates="operates"/>
        <!--2-->
        <!--<el-preImage :data="list" :stripe="false" :header-cell-style="{background:'#F2F3F5', color: '#8F9BB3'}">-->
        <!--<template v-for="(column, index) in columns">-->
        <!--<el-preImage-column header-align="center" align="center" :prop="column.prop" :key="column.label" :label="column.label" :fixed="column.fixed" :min-width="column.width" :sortable="column.sortable || false" :show-overflow-tooltip="column.tooltip || false"/>-->
        <!--</template>-->
        <!--<el-preImage-column header-align="center" align="center" label="操作" width="120px" fixed="right">-->
        <!--<template v-slot="scope">-->
        <!--<template v-if="column.formatter">-->
        <!--<span v-html="column.formatter(scope.row, column)"></span>-->
        <!--</template>-->
        <!--<template v-else>-->
        <!--<span>{{scope.row[column.prop]}}</span>-->
        <!--</template>-->
        <!--</template>-->
        <!--</el-preImage-column>-->
        <!--</el-preImage>-->
        <!--3-->
        <!--<div class="dataList">-->
        <!--<div class="item" v-for="(item,i) in list" :key="i">-->
        <!--<div class="flex-x-between">-->
        <!--<div class="device-name">{{item.deviceName}}</div>-->
        <!--<div class="status">{{item.online==1?'在线':'离线'}}</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->

        <!--分页-->
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getDataInfo"/>

        <!-- Dialog-->
        <el-dialog :title="dialog.title" :width="dialog.dWidth" :visible.sync="dialog.show"
                   :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="dialogForm" :model="dialog.formInfo" :rules="dialog.rules" size="small" label-width="100px"
                     label-position="left">
                <el-row>
                    <el-col :xs="12" :sm="12" :lg="12">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="dialog.formInfo.name" size="small" :style="dialog.width"
                                      :disabled="dialog.formInfo.id!=undefined"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="dialog.formInfo.phone" size="small" :style="dialog.width"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="12" :sm="12" :lg="12">
                        <el-form-item label="部门">
                            <el-select v-model="dialog.formInfo.departmentId" :style="dialog.width" clearable
                                       placeholder="请选择部门">
                                <el-option v-for="item in departmentList" :key="item.value" :label="item.label"
                                           :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="12">
                        <el-form-item label="是否在职" prop="b">
                            <el-radio v-for="t in dialog.yesOrNo" :key="t.val" v-model="dialog.formInfo.b"
                                      :label="t.val">{{t.name}}
                            </el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="12" :sm="12" :lg="12">
                        <el-form-item label="备注">
                            <el-input v-model="dialog.formInfo.remark" type="textarea" :style="dialog.width" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="12">
                        <el-form-item label="开关">
                            <el-switch v-model="dialog.formInfo.open" active-text="开" inactive-text="关" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" size="small" v-preventReClick @click="submit">提 交</el-button>
                <el-button size="small" @click="closeDialog">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import setting from './setting'

    export default {
        name: "page",
        data() {
            return {
                /** setting */
                setting: setting,
                /** preImage */
                columns: setting.columns,
                searchMore: false,
                dateRange: [],
                queryParams: {
                    pageNum: 1,
                    pageSize: 10
                },
                departmentList: setting.departmentList,
                list: [],
                total: 0,
                options: {								// preImage 配置的参数
                    stripe: true,						// 是否为斑马纹 preImage
                    loading: false,						// 是否添加表格loading加载动画
                    highlightCurrentRow: true,			// 是否支持当前行高亮显示
                },
                operates: {
                    width: 120,
                    fixed: "right",
                    label: "操作",
                    list: [
                        {
                            id: "detail", label: "详情", type: "text", show: true, disabled: false,
                            method: (index, row) => {
                                this.handleDetail(row);
                            }
                        },
                        {
                            id: "edit", label: "修改", type: "text", show: true, disabled: false,
                            method: (index, row) => {
                                this.handleEdit(row);
                            }
                        },
                        {
                            id: "del", label: "删除", type: "text", show: true, disabled: false,
                            method: (index, row) => {
                                this.handleDel(row);
                            }
                        }
                    ]
                },
                /** dialog */
                dialog: {
                    show: false,
                    title: '新增',
                    dWidth: '800px',
                    width: 'width:220px',
                    rules: setting.rules,
                    yesOrNo: [{val: 0, name: '否'}, {val: 1, name: '是'}],
                    formInfo: {
                        a: '',
                        b: ''
                    },
                }
            };
        },
        created() {
            let _ = this
            _.getDataInfo()
        },
        methods: {
            async getDataInfo() {
                let _ = this
                console.log('getDataInfo-queryParams', _.queryParams)
                // const { data: res } = await _.$H.post(_.$A.lift.page, _.queryParams)
                // _.list = res.data.list || []
                // _.total = res.data.total || 0
            },
            /** 表单操作 */
            //新增
            handleAdd() {
                let _ = this
                _.dialog.show = true
            },
            //查看详情
            handleDetail() {

            },
            //修改
            handleEdit() {
                let _ = this
                _.dialog.title = '修改'
                _.dialog.show = true
            },
            //单条删除
            handleDel(row) {
                let _ = this
                _.$modal.confirm("确认删除该条记录？", "删除", () => {
                    _.delOne([row.id])
                })
            },
            //删除
            async delOne(id) {
                let _ = this
                const {data: res} = await _.$H.post(_.$A.role.del, JSON.stringify(id))
                if (res.code == 200) {
                    _.$modal.msgSuccess('删除成功！')
                } else {
                }
                _.getDataInfo()
            },

            /** Dialog */
            submit() {
                let _ = this
                _.$refs["dialogForm"].validate(async valid => {
                    if (!valid) return
                    if (_.dialog.formInfo.id == undefined) {
                        const {data: res} = await _.$H.post(_.$A.productionScheduling.add, _.dialog.formInfo)
                        if (res.code == 200) {
                            _.$modal.msgSuccess('新增成功！')
                        } else {
                        }
                    } else {
                        const {data: res} = await _.$H.post(_.$A.productionScheduling.update, _.dialog.formInfo)
                        if (res.code == 200) {
                            _.$modal.msgSuccess('修改成功！')
                        } else {
                        }
                    }
                    _.getDataInfo()
                    _.resetForm("dialogForm");
                    _.dialog.show = false
                });
            },
            closeDialog() {
                let _ = this
                _.resetForm("dialogForm");
                _.dialog.show = false
            }

        }
    };
</script>

<style lang="less" scoped>
    @import "index.less";
</style>
